<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style type="text/css">
        .container{
            width: 780px;
            margin: 50px auto;
        }
        .ipt{
            height: 16px;
            width: 328px;
            padding: 11px 10px;
            margin-right: 10px;
            border: 1px solid #aeaeae;
            display: block;
            float: left;
        }
        label {
            height: 42px;
            width: 65px;
            margin-right: 10px;
            text-align: right;
            display: block;
            float:left;
            line-height: 42px;
        }
        .tips{
            display: none;
        }
        .clear{
            clear: both;
        }
        #btn{
            width: 350px;
            height: 50px;
            background-color: #3f89ec;
            color: #fff;
            font-size: 16px;
            border: 0;
        }
    </style>
</head>
<body>

    <div class="container">

        <c:if test="${not empty errMsg}">
            <p style="color: red;">${errMsg}</p>
        </c:if>

        <p style="color: red;" id="userExistTips"></p>

        <form onsubmit="return check()" method="post"
              action="${pageContext.request.contextPath}/login">
            <p>
                <label>用户名</label>
                <input type="text" class="ipt" id="username"
                       placeholder="请输入用户名" name="uname"
                onfocus="show('tip1')" onblur="usernameOnBlur('tip1')">
                <span id="tip1" class="tips">请输入5-18个字符的用户名</span>
                <div class="clear"></div>
            </p>
            <p>
                <label>密码</label>
                <input type="password" class="ipt" name="pass"
                       placeholder="请输入密码" >
                <div class="clear"></div>
            </p>
            <p>
                <label>&nbsp;</label>
                <input type="checkbox"> 阅读并接受协议
                <div class="clear"></div>
            </p>
            <p>
                <label>&nbsp;</label>
                <input id="btn" type="submit" value="登录">
            </p>
        </form>
    </div>

    <script type="text/javascript">

        function createXHR(){
            var xmlHttp;
            try {
                xmlHttp = new XMLHttpRequest();
            } catch (tryMS) {
                try {
                    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (otherMS) {
                    try {
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (failed) {
                        xmlHttp = null;
                        // 这里可以报一个错误，无法获得 XMLHttpRequest对象
                    }
                }
            }
            return xmlHttp;
        }


        function checkUserExist() {
            var username = document.getElementById("username").value;
            //1.创建XMLHttpRequest对象
            var xhr = createXHR();
            //2.将状态触发器绑定到一个函数
            xhr.onreadystatechange = function (){
                //5.在回调函数中对返回数据进行处理
                if(xhr.readyState == 4){
                    if(xhr.status == 200) {
                        //如果返回成功
                        var obj = eval( "(" + xhr.responseText + ")" );
                        if(obj.result){
                            document.getElementById("userExistTips").innerText
                                = obj.msg;
                        }else{
                            document.getElementById("userExistTips").innerText = "";
                        }
                    }
                }
            };

            //3.使用open方法建立与服务器的连接
            xhr.open("get",
                "${pageContext.request.contextPath}/checkUser?username="+username);
            //4.向服务器端发送数据
            xhr.send(null);
        }


        function usernameOnBlur(id){
            checkUserExist();
            hide(id);
        }

        function check(){
            var username = document.getElementById("username").value;
            var telephone = document.getElementById("telephone").value;
            var tag = true;
            if(username.length < 5 || username.length > 18 ){
                alert("用户名不合法！");
                tag = false;
            }
            if(telephone == ""){
                alert("手机号不能为空！");
                tag = false;
            }
            return tag;
        }

        function show(id) {
            var span = document.getElementById(id);
            span.style.display = "inline";
        }
        function hide(id){
            var span = document.getElementById(id);
            span.style.display = "none";


        }
    </script>

</body>
</html>